/**
 * WidgetPropertyHeader
 */

import React, {Component} from 'react';
import { connect } from 'dva';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import editorActions from '../../../actions/Editor/editor';
import FocusTab from "../../../consts/focusTabs";

class WidgetPropertyHeader extends Component{
    handleOnChangeTab(type){
        const {status,setState} = this.props;
        if (type === FocusTab.EVENT){
            status.showFloatingHead = false;
            setState({focusTab: type,status: status});
            return;
        }
        setState({focusTab: type});
    }
    render(){
        const {focusTab} = this.props;
        return (
            <header className="header">
                <div onClick={() => this.handleOnChangeTab(FocusTab.PROPERTY)} className={"sidebar-tab-btn " + (focusTab == FocusTab.PROPERTY ? "focus" : "")}>{$._("Property")}</div>
                <div onClick={() => this.handleOnChangeTab(FocusTab.ANIMATION)} className={"sidebar-tab-btn " + (focusTab == FocusTab.ANIMATION ? "focus" : "")}>{$._('Animation')}</div>
                <div onClick={() => this.handleOnChangeTab(FocusTab.EVENT)} className={"sidebar-tab-btn " + (focusTab == FocusTab.EVENT ? "focus" : "")}>{$._('Interactive')}</div>
            </header>
        )
    }
}

const mapStateToProps = ({ editor}) => {
  return {
      status: editor.status,
      focusTab: editor.focusTab,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(editorActions, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(WidgetPropertyHeader);
